<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="h" uri="/syzg-html"%>
<!DOCTYPE html>
<html>
<body>
<div class="modal fade bs-example-modal-lg" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增人员信息</h4>
      </div>
      <div class="modal-body" id="modalCore">
      <form class="form-horizontal" role="form" id="aeForm" name="aeForm">
	    <fieldset>
      	<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
	    <ul id="myTabs" class="nav nav-tabs" role="tablist">
	      <li role="presentation" class="active"><a href="#baseInfo" role="tab" data-toggle="tab">人员基本信息</a></li>
	      <li role="presentation"><a href="#permissionInfo" role="tab" data-toggle="tab">人员权限</a></li>
	    </ul>
	    <div id="myTabContent" class="tab-content" style="height: auto;">
	      <div role="tabpanel" class="tab-pane fade in active" style="margin-top: 5px;" id="baseInfo" aria-labelledBy="home-tab">
	            <div class="form-group">
				  <label class="col-sm-2 control-label" for="code">人员编号</label>
			  	  <div class="col-sm-3">
	                <input type="text" id="code" name="code" class="form-control" placeholder="必填项"/>
	              </div>
	              <label class="col-sm-2 control-label" for="account">人员账号</label>
	              <div class="col-sm-3">
	                <input type="text" id="account" name="account" class="form-control" placeholder="必填项"/>
			      </div>
	            </div>
	            <div class="form-group">
			      <label class="col-sm-2 control-label" for="name">人员姓名</label>
			      <div class="col-sm-3">
				    <input type="text" id="name" name="name" class="form-control" placeholder="必填项">
			      </div>
			      <label class="col-sm-2 control-label" for="birthday">人员生日</label>
			      <div class="col-sm-3">
	                <input type="text" id="birthday" name="birthday" class="form-control" readonly="readonly"
	                onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,startDate:'%y-%M-01 00:00:00',alwaysUseStartDate:true});"
	                >
			      </div>
			    </div>
	            <!-- <div class="form-group">
			      <label class="col-sm-2 control-label" for="password">密码</label>
			      <div class="col-sm-3">
			        <input type="hidden" id="password" name="password">
			        <input type="password" id="passwordTemp" name="passwordTemp" class="form-control" />
			      </div>
			      <label class="col-sm-2 control-label" for="passwordConfirm">确认密码</label>
			      <div class="col-sm-3">
			        <input type="password" id="passwordConfirm" name="passwordConfirm" class="form-control" />
			      </div>
				</div> -->
			    <div class="form-group">
			      <label for="sex" class="col-sm-2 control-label">性别</label>
				  <div class="col-sm-3">
				    <select id="sex" name="sex" class="form-control" style="width: 50%">
	                  <option value="1" selected>男</option><option value="0">女</option>
	                </select>
	              </div>
	              <label for="status" class="col-sm-2 control-label">状态</label>
	              <div class="col-sm-3">
	                <select id="status" name="status" class="form-control" style="width: 50%">
	                  <option value="1" selected>有效</option><option value="0">无效</option>
	                </select>
	              </div>
	            </div>
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="email">手机号码</label>
	              <div class="col-sm-3">
	                <input type="text" id="mobile" name="mobile" class="form-control" />
	              </div>
	              <label class="col-sm-2 control-label" for="homeTel">工作电话</label>
	              <div class="col-sm-3">
	                <input type="text" id="workTel" name="workTel" class="form-control"/>
	              </div>
	            </div>
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="homeAddres">家庭住址</label>
	              <div class="col-sm-8">
	                <input type="text" id="homeAddres" name="homeAddres" class="form-control" />
	              </div>
	            </div>
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="linkman">联系人</label>
	              <div class="col-sm-3">
	                <input type="text" id="linkman" name="linkman" class="form-control" />
	              </div>
	              <label class="col-sm-2 control-label" for="linkmanTel">联系人电话</label>
	              <div class="col-sm-3">
	                <input type="text" id="linkmanTel" name="linkmanTel" class="form-control"/>
	              </div>
	            </div>
				<!-- generate code end -->
	      </div>
	      <div role="tabpanel" class="tab-pane fade" style="margin-top: 5px;" id="permissionInfo" aria-labelledBy="profile-tab">
	        <h:table cssClass="table table-bordered table-hover table-striped" id="permissionInfo" value="roleList">
				<h:column headerTitle="角色" width="138">
					<input type="checkbox" onclick="selectInput(this);" name="roleId" value="${o.id }" />
					${o.name }&nbsp;
				</h:column>
				<h:column headerTitle="角色描述"  width="138">${o.description }&nbsp;</h:column>
			</h:table>
	      </div>
	    </div>
	  </div>
	  </fieldset>
	  </form>
      	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="submitSave('add');">保存</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">

$('#aeForm').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
	  code: {
    	  group: '.col-sm-3',
          message: '人员编号格式不正确',
          validators: {
              notEmpty: {
                  message: '人员编号不能为空'
              }
          }
      },
      account: {
    	  group: '.col-sm-3',
          message: '人员账号格式不正确',
          validators: {
              notEmpty: {
                  message: '人员账号不能为空'
              }
          }
      },
      name: {
    	  group: '.col-sm-3',
          message: '人员姓名格式不正确',
          validators: {
              notEmpty: {
                  message: '人员姓名不能为空'
              }
          }
      }/* ,
      passwordTemp: {
    	  group: '.col-sm-3',
          validators: {
              identical: {
                  field: 'passwordConfirm',
                  message: '两次密码输入不一致'
              }
          }
      },
      passwordConfirm: {
    	  group: '.col-sm-3',
          validators: {
              identical: {
                  field: 'passwordTemp',
                  message: '两次密码输入不一致'
              }
          }
      } */
  	}
}).on('success.form.bv', function(e, data) {
	$("#password").val($("#passwordTemp").val());
	//判断是否选择角色
	var len = $("input:checkbox[name='roleId']:checked").length;
	if(len > 0)
	{
		FormFunction.submitSave('add');
	}else{
		alert('请选择角色');
	}
});

function selectInput(flag){    
	var tdNode = flag.parentNode;
	var trNode = tdNode.parentNode;
	var nodename = trNode.nodeName; 
	var inputs = trNode.getElementsByTagName("input");  
	for(var count=0;count<inputs.length;count++) {
	   inputs[count].checked=flag.checked;
	}
}
</script>
</body>
</html>

